<template>
  <div class="info-form">

<el-form ref="infoForm" :model="infoForm" size="small" label-width="100px">


      <el-form-item label="库名" prop="name" :rules="[{
                    required: true, message: '库名不能为空', trigger: 'blur'
                  },{min: 2, max: 20, message: '课程名称长度在2 到 20 个字符', trigger: 'blur'}]">
        <el-input maxlength="20" clearable v-model="infoForm.name" size="small" placeholder="请输入库名"/>
      </el-form-item>
      <el-form-item label="生成数量" prop="num" :rules="[{
                    required: true, message: '生成数量不能为空', trigger: 'blur'
                  }]">
        <el-input maxlength="20" type="number"  clearable v-model="infoForm.num" size="small" placeholder="请输入生成数量"/>
      </el-form-item>
      <el-form-item label="关联课程" prop="productId" :rules="[{
                    required: true, message: '请选择课程', trigger: 'change'
                  }]">
        <el-select v-model="infoForm.productId" filterable clearable  placeholder="请选择" size="small" width='100'>
          <el-option v-for="item in deviceList" :key="item.id" :label="item.courseName" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="有效期" >
        <el-radio-group v-model="infoForm.effective">
          <el-radio :label="1">永久</el-radio>
          <el-radio :label="0">自定义</el-radio>
        </el-radio-group>
      </el-form-item>


      <el-form-item v-if="infoForm.effective==0"  class="initMargin"  prop="orderDate"  label="日期筛选" >
        <el-date-picker v-model="infoForm.orderDate" type="datetimerange" format="yyyy-MM-dd hh:mm:ss"
          value-format="yyyy-MM-dd hh:mm:ss" :picker-options="pickerOptions2" range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期" align="right" size="small" @change='dateChange'>
        </el-date-picker>
      </el-form-item>


    </el-form>
    <div style="text-align: center">
      <el-button icon="el-icon-document-add" :loading="addBtnLoading" type="primary" size="medium" @click="submitForm('infoForm')">提交
      </el-button>
      <el-button icon="el-icon-back" style="margin-left: 15px" size="medium" @click="closeWin('infoForm')">关闭
      </el-button>
    </div>
  </div>
</template>

<script>
  import gzhApi from '@/api/gzh/code'
  import uploadImage from '@/components/newUploadImage'
  export default {
    name: "member",
    data() {
      // 手机号验证
      var phoneReg = /^1\d{10}$/
      var validatePhone = (rule, value, callback) => {
        if (value) {
          if (!phoneReg.test(value)) {
            callback(new Error('请输入正确手机号码'));
          } else {
            callback();
          }
        } else {
          callback(new Error('手机号码必填'));
        }
      };
      return {
        pickerOptions2: {
                 shortcuts: [{
                   text: '最近一周',
                   onClick(picker) {
                     const end = new Date();
                     const start = new Date();
                     start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                     picker.$emit('pick', [start, end]);
                   }
                 }, {
                   text: '最近一个月',
                   onClick(picker) {
                     const end = new Date();
                     const start = new Date();
                     start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                     picker.$emit('pick', [start, end]);
                   }
                 }, {
                   text: '最近三个月',
                   onClick(picker) {
                     const end = new Date();
                     const start = new Date();
                     start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                     picker.$emit('pick', [start, end]);
                   }
                 }]
        },
        orderDate:["2020-09-24 12:00:00", "2020-10-21 12:00:00"],
        uillUpdateImg: false,
        paramsList:[



        ],
        addBtnLoading: false,
        // 手机号验证
        validatePhone: validatePhone,
      }
    },
    props: {
      deviceList:{
        type: Array,
      },
      infoForm: {
        type: Object,
        default() {
          return {};
        }
      },
    },
    created() {
    },
    mounted() {
    },
    components: {uploadImage},
    methods: {
      dateChange(e){
          console.log(e);
          var dateArr=e;
          this.infoForm.startTime=dateArr[0];
          this.infoForm.endTime=dateArr[1];
      },
      // 提交表单
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          var parmseData=this.infoForm;
          if (valid) {
            console.log(this.infoForm.startTime)
            console.log(this.infoForm.effective)
            if(!this.infoForm.startTime&&this.infoForm.effective==0){
              this.$message({
                message:'请填写日期'
              });
              return false;
            }

            let method = 'courseCodeAdd'
            if (this.infoForm.id) {
              method = 'courseCodeEdit'
            }else{
              parmseData.status=1;
            }
            this.addBtnLoading = true
            gzhApi[method](parmseData).then(res => {
              this.addBtnLoading = false
              this.$refs[formName].resetFields()
              this.$message({
                type: 'success',
                message: this.infoForm.id ? '修改成功' : '添加成功'
              })
              if (this.infoForm.id) {
                // 编辑
                this.$emit('submit',1)
              }else{
                // 添加
                this.$emit('submit',0)
              }
              // 调动关闭窗体方法
              this.$emit('closeWin')
            }).catch(e => {
              this.addBtnLoading = false
            })
          }
        })
      },
      // 关闭窗体
      closeWin() {
        this.$refs['infoForm'].resetFields()
        this.$emit('closeWin')
      }
    }
  }
</script>

<style lang="less">

  .ql-editor{
    max-height:45vh;
    overflow: scroll;
  }
  .el-dialog__body{
    max-height:65vh;
    overflow: scroll;
  }

</style>
